<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>上传文件</h1>
    <!-- 设置请求地址 请求方式 请求头,上传文件的请求头必须为multipart/form-data -->
    <form action="/upload" method="post" enctype="multipart/form-data">
      <!-- accept:设置允许选择的类型为所有型(*) -->
      <input type="file" accept="*" name="myfile" />
      <button>上传</button>
    </form>
    <h1>ajax上传文件</h1>
    <input type="file" accept="*" name="myfile" id="myfile" />
    <p></p>
  </body>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script>
    //获取输入框中的文件信息对象
    $("#myfile").change((e) => {
      let data = new FormData();
      //获取文件对象信息
      let file = e.target.files[0];
      console.log(file);
      data.append("myfile", file);
      $.ajax({
        url: "/upload",
        method: "post",
        data: data,
        //设置ajax不能更改配置
        processData: false,
        //阻止ajax设置内容类型
        contentType: false,
        success(res) {
          console.log(res);
          $("p").html(res);
        },
      });
    });
  </script>
</html>
